import React, { useState, useEffect } from 'react';
import { projectPaymentGuarantee } from '@/services/public'
import { Descriptions, } from 'antd';
import styles from './index.less'
import { accDiv, formatDateIOS, accMul, handleFileid, isAssetTypeAnImage, handleFileUrl } from '@/utils/utils';


interface PaymentProps {
    projectInfo: any;
}
const Payment: React.FC<PaymentProps> = ({ projectInfo }) => {
    const [detailInfo, setDetailInfo] = useState<any>({});

    const getDetail = async () => {
        let res = await projectPaymentGuarantee({
            projectId: projectInfo.projectId,
            corpId: projectInfo.corpId,
        })
        if (res.success) {
            setDetailInfo(res.data)
        }
    }
    useEffect(() => {
        getDetail()
    }, [])
    return <>
        <div
            className={styles.boardDiv}
        // style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
            <Descriptions
                column={{ lg: 3, md: 2, sm: 2, xs: 1 }}
                labelStyle={{ width: '120px', fontWeight: '500' }}
            >
                <Descriptions.Item label="担保金融机构名称">{detailInfo.projectPaymentGuaranteeName || '-'}</Descriptions.Item>
                <Descriptions.Item label="联系人/电话">{detailInfo.projectPaymentGuaranteeUserName}/{detailInfo.projectPaymentGuaranteeUserPhone}</Descriptions.Item>
                <Descriptions.Item label="担保金额">{detailInfo.projectPaymentGuaranteeAmount
                    ? accDiv(detailInfo.projectPaymentGuaranteeAmount || 0, 1000000) + '（万元）'
                    : '-'}
                </Descriptions.Item>
            </Descriptions>
        </div>
        {detailInfo.projectPaymentGuaranteeFileUrl ? detailInfo.projectPaymentGuaranteeFileUrl.split(',').map((itemUrl: any, index: any) => {
            if (isAssetTypeAnImage(itemUrl)) {
                return (
                    <div className={styles.imgBox} key={index}>
                        <img src={itemUrl} />
                    </div>
                );
            }
            return (
                <div className={styles.imgBox} key={index}>
                    <iframe src={itemUrl + `#toolbar=0`} style={{ width: '100%', height: '70vh' }} />
                </div>
            );
        }) : (
            <div className={styles.mession}>暂未上传</div>
        )}
    </>
}
export default Payment;